<template>
  <div class="homePage">
    <!-- 时间 -->
    <div class="head sj">
      <b>{{ time }}</b>
      <label>{{ date }}</label>
      <label>{{ weekDay }}</label>
    </div>
    <!-- 天气 -->
    <div class="head tq">
      <label>{{ weather }}</label>
      <!-- <label>微风</label> -->
      <b>{{ temp_high }}</b>
    </div>
    <!-- 主体 -->
    <div class="main">
      <!-- 左边 -->
      <div class="left">
        <!-- 监督对象 -->
        <div class="module jddx">
          <div class="tit">
            <div class="name">
              <b>监督对象</b>
              <label>Supervised Objects</label>
            </div>
          </div>
          <div class="box">
            <Jddx :JddxData="JddxData" />
          </div>
        </div>
        <!-- 廉政档案 -->
        <div class="module lzda">
          <div class="tit">
            <div class="name">
              <b>廉政档案</b>
              <label>Incorrupt Gov archives</label>
            </div>
          </div>
          <div class="box">
            <Lzda :LzdaData="LzdaData" />
          </div>
        </div>
        <!-- 重点项目 -->
        <div class="module zdxm">
          <div class="tit">
            <div class="name">
              <b>{{ projectTitle }}</b>
              <label>Major Projects</label>
            </div>
            <div class="select" @click="selectOtherProject()"></div>
          </div>
          <div class="box" v-if="otherProjectFlag">
            <Zdxm
              :ZdxmData="ZdxmData"
              ref="Zdxm"
              @checkProject="projectIntroductionActive"
            />
          </div>
          <div class="box" v-else>
            <Anhuan ref="Anhuan" @checkProject="projectIntroductionActive" />
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="cent">
        <!-- 统计 -->
        <div class="tj">
          <div class="tjBod">
            <Tj :TjData="TjData" />
          </div>
        </div>
        <!-- 日常监督 -->
        <div class="module rcjd">
          <div class="tit">
            <div class="name">
              <b>日常监督(分数)</b>
              <label>Daily supervision</label>
            </div>
          </div>
          <div class="box">
            <Rcjd :RcjdData="RcjdData" />
          </div>
        </div>
        <!-- 执纪问责 -->
        <div class="module zjwz">
          <div class="tit">
            <div class="name">
              <b>执纪问责</b>
              <label>Enforce discipline and Accountability</label>
            </div>
            <div class="timeChange">
              <a-month-picker
                placeholder="选择时间"
                @change="zjwzTimeChange"
                v-model="paramTimes"
                style="width: 110px"
                format="YYYY-MM"
                valueFormat="YYYY-MM"
              >
              </a-month-picker>
            </div>
          </div>
          <div class="box">
            <Zjwz :ZjwzData="ZjwzData" ref="zjwz" />
          </div>
        </div>
      </div>
      <!-- 右边 -->
      <div class="right">
        <!-- 专项监督 -->
        <div class="module zxjd">
          <div class="tit">
            <div class="name">
              <b>专项监督</b>
              <label>Special Supervision</label>
            </div>
          </div>
          <div class="box">
            <Zxjd />
          </div>
        </div>
        <!-- 廉政建设 -->
        <div class="module lzxc">
          <div class="tit">
            <div class="name">
              <b>廉政建设</b>
              <label>Incorrupt Gov propaganda</label>
            </div>
            <div class="select"></div>
          </div>
          <div class="box">
            <Lzxc :LzxcData="LzxcData" />
          </div>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <div
      class="popBod"
      v-if="projectIntroductionFlag && projectInfoType == 1"
      @click.self="projectIntroductionActive()"
    >
      <div class="projectIntroduction">
        <div class="overview">
          <div class="close" @click="projectIntroductionActive()">X</div>
          <div class="xmmc">
            <h1>{{ projectInfo.name }}</h1>
            <label>{{ projectInfo.xmstatus == 1 ? "进行中" : "已完工" }}</label>
            <label
              style="background: red; color: #fff"
              @click="projectIntroductionYQ(projectInfo)"
            >
              {{ projectInfo.xmstatus > 0 ? "延期" : "正常" }}</label
            >
          </div>
          <p>
            总投资：<b
              >{{ formatCurrencyFixedDecimal(projectInfo.zongtz, 2) }} </b
            >万元
          </p>
          <p>
            当年累计完成投资：<b>
              {{
                formatCurrencyFixedDecimal(projectInfo.yeartz * 10000, 2)
              }} </b
            >万元
          </p>
          <p>
            项目累计完成投资：<b>{{
              formatCurrencyFixedDecimal(projectInfo.leijitz * 10000, 2)
            }}</b
            >万元
          </p>
        </div>
        <div class="synopsis">
          <div class="item">
            <div class="title">项目简介</div>
            <div class="bod">
              <p>{{ projectInfo.content }}</p>
            </div>
          </div>
          <div class="item">
            <div class="title">年度任务目标</div>
            <div class="bod">
              <p>{{ projectInfo.yearflag }}</p>
            </div>
          </div>
          <div class="item">
            <div class="title">当月计划</div>
            <div class="bod">
              <p>{{ projectInfo.monthflag }}</p>
            </div>
          </div>
          <div class="item">
            <div class="title">工程进度</div>
            <div class="bod">
              <p>{{ projectInfo.monthflag }}</p>
            </div>
          </div>
        </div>
        <div class="enterprise">
          <div>
            <p>责任单位:{{ projectInfo.builder }}</p>
            <!-- <p>项目地址:{{ projectInfo.pa00106 }}</p> -->
          </div>
          <div>
            <p>责任领导：{{ projectInfo.lindao }}</p>
            <!-- <p>项目经理：{{ projectInfo.pa00112 }}</p> -->
          </div>
        </div>
      </div>
    </div>

    <div
      class="popBod_Anhuan"
      v-if="projectIntroductionFlag && projectInfoType == 2"
      @click.self="projectIntroductionActive()"
    >
      <div class="projectIntroduction">
        <div class="overview">
          <div class="close" @click="projectIntroductionActive()">X</div>
          <div class="xmmc">
            <h1>{{ projectInfoDetails.name }}</h1>
            <label>{{ projectInfoDetails.status }}</label>
            <label>{{ projectInfoDetails.type }}</label>
          </div>
          <p>
            资产价值：<b
              >{{
                formatCurrencyFixedDecimal(
                  projectInfoDetails.assetValue * 10000,
                  2
                )
              }} </b
            >万元
          </p>
          <p>
            总投资：<b>
              {{
                formatCurrencyFixedDecimal(
                  projectInfoDetails.investment * 10000,
                  2
                )
              }} </b
            >万元
          </p>

          <p>
            建筑面积：<b>{{ projectInfoDetails.area }} </b>平方米
          </p>
        </div>
        <div class="synopsis">
          <div class="item">
            <div class="title">资产介绍</div>
            <div class="bod">
              <p>{{ projectInfoDetails.content }}</p>
            </div>
          </div>
        </div>
        <div class="enterprise">
          <div>
            <p>所属公司:{{ projectInfoDetails.deptId_str }}</p>
            <p>资产地址:{{ projectInfoDetails.address }}</p>
          </div>
          <div>
            <p>分管领导：{{ projectInfoDetails.fgbmLeader_str }}</p>
          </div>
        </div>
      </div>
    </div>
    <div
      class="popBod_Anhuan_title"
      @click.self="projectIntroductionActiveTitle()"
      v-if="projectIntroductionTitleFlag"
    >
      <div class="projectIntroduction">
        <!-- <div class="overview">
          <div class="close" @click="projectIntroductionActiveTitle()">X</div>
        </div> -->
        <div class="synopsis">
          <div class="item">
            <div class="title">延期内容</div>
            <div class="bod">
              <p v-html="yqcontent"></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 以下边框，勿动 -->
    <div class="border">
      <div class="topBorder"></div>
      <div class="title"></div>
      <div class="topBorder"></div>
      <div class="leftBorder"></div>
      <div class="rightBorder"></div>
      <div class="footerBorder"></div>
    </div>
  </div>
</template>

<script>
import Jddx from "./components/Jddx.vue"; // 监督对象
import Lzda from "./components/Lzda.vue"; // 廉政档案
import Zdxm from "./components/Zdxm.vue"; // 重点项目
import Tj from "./components/Tj.vue"; // 统计
import Rcjd from "./components/Rcjd.vue"; // 日常监督
import Zjwz from "./components/Zjwz.vue"; // 执纪问责
import Zxjd from "./components/Zxjd.vue"; // 专项监督
import Lzxc from "./components/Lzxc.vue"; // 廉政建设
import Anhuan from "./components/AnHuan.vue"; // 安环
import { findList, getAnhuanProjectDetails } from "./utils/api";
import { getZjwz } from "./utils/api";
import "./assets/font/font.css"; // 引入字体样式
import axios from "axios";
export default {
  name: "Home",
  components: {
    Jddx,
    Lzda,
    Zdxm,
    Tj,
    Rcjd,
    Zjwz,
    Zxjd,
    Lzxc,
    Anhuan,
  },
  data() {
    return {
      // 监督对象
      JddxData: {},
      // 廉政档案
      LzdaData: {},
      // 重点项目
      ZdxmData: [],
      // 统计
      TjData: [],
      // 日常监督
      RcjdData: [],
      // 执纪问责
      ZjwzData: {},
      // 专项监督
      ZxjdData: [],
      // 廉政建设
      LzxcData: [],
      // 时间
      timer: "", // 定义一个定时器
      time: "",
      date: "",
      weekDay: "",
      weather: "",
      temp_high: "",
      // 弹窗的标志
      projectIntroductionFlag: false,
      projectIntroductionTitleFlag: false,
      otherProjectFlag: true,
      projectTitle: "重点项目(内控)",
      projectInfo: {},
      projectInfoType: 1,
      projectInfoDetails: {},
      yqcontent: "",
      paramTimes: "",
    };
  },
  created() {
    this.getTime();
    this.getWeather();
    this.handleGetZjwz();
    findList().then((res) => {
      this.JddxData = {
        firstSubsidiary: res.data[0].firstSubsidiary,
        listedCompany: res.data[0].listedCompany,
        controlSubsidiaries: res.data[0].controlSubsidiaries,
        workers: res.data[0].workers,
        partyMember: res.data[0].partyMember,
        partyOrganization: res.data[0].partyOrganization,
        partyCommittee: res.data[0].partyCommittee,
        generalPartyBranch: res.data[0].generalPartyBranch,
        partyBranch: res.data[0].partyBranch,
      };
      this.LzdaData = {
        integrityArchivesNum: res.data[0].integrityArchivesNum,
        integrityArchivesRate: res.data[0].integrityArchivesRate,
        jobRiskNum: res.data[0].jobRiskNum,
        jobRiskRate: res.data[0].jobRiskRate,
      };
      this.ZdxmData = [
        res.data[0].keyProjects1,
        res.data[0].keyProjects2,
        res.data[0].keyProjects3,
        res.data[0].keyProjects4,
        res.data[0].keyProjects5,
        res.data[0].keyProjects6,
        res.data[0].keyProjects7,
        res.data[0].keyProjects8,
        res.data[0].keyProjects9,
        res.data[0].keyProjects10,
        res.data[0].keyProjects11,
        res.data[0].keyProjects12,
        res.data[0].keyProjects13,
        res.data[0].keyProjects14,
        res.data[0].keyProjects15,
      ];
      this.TjData = {
        superviseEnterprises: res.data[0].superviseEnterprises,
        supervisorsNumber: res.data[0].superviseNum,
        keyProjects: res.data[0].keyProjects,
        accountability: res.data[0].accountability,
      };

      this.RcjdData = [
        res.data[0].supervision1,
        res.data[0].supervision2,
        res.data[0].supervision3,
        res.data[0].supervision4,
        res.data[0].supervision5,
        res.data[0].supervision6,
        res.data[0].supervision7,
      ];
      // this.ZjwzData = {
      //   caseHandling: res.data[0].caseHandling.split(","),
      //   clueProcessing: res.data[0].clueProcessing.split(","),
      //   reminder: res.data[0].reminder.split(","),
      // };
      this.ZxjdData = [
        res.data[0].groupCorruption1,
        res.data[0].groupCorruption2,
        res.data[0].groupCorruption3,
        res.data[0].groupCorruption4,
        res.data[0].groupCorruption5,
        res.data[0].groupCorruption6,
        res.data[0].groupCorruption7,
        res.data[0].groupCorruption8,
        res.data[0].groupCorruption9,
      ];
      this.LzxcData = [
        res.data[0].propaganda1,
        res.data[0].propaganda2,
        res.data[0].propaganda3,
        res.data[0].propaganda4,
        res.data[0].propaganda5,
        res.data[0].propaganda6,
        res.data[0].propaganda7,
        res.data[0].propaganda8,
        res.data[0].propaganda9,
        res.data[0].propaganda10,
        res.data[0].propaganda11,
      ];
    });
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    handleGetZjwz(times) {
      getZjwz({ paramTimes: times }).then((res) => {
        this.ZjwzData = res.data;
        this.$nextTick(() => this.$refs.zjwz.handleGetZjwz(res.data));
      });
    },
    zjwzTimeChange(item) {
      console.log(item, "item");
      this.paramTimes = item;
      this.handleGetZjwz(item);
    },
    projectIntroductionYQ(item) {
      this.yqcontent = "";
      this.projectIntroductionTitleFlag = true;
      var content = item.yqcontent.split("$");
      for (var i = 0; i < content.length; i++) {
        this.yqcontent += i + 1 + "、" + content[i] + "<br>";
      }
    },
    onGetAnhuanProjectDetails(id) {
      getAnhuanProjectDetails({ id: id }).then((res) => {
        this.projectInfoDetails = res.data.data;
      });
    },
    formatCurrencyFixedDecimal(amount = 0, decimalPlaces = 2) {
      console.log(amount, "amount");
      amount = Number(amount) / 10000;
      const formattedNumber = amount.toFixed(decimalPlaces); // 固定小数位数
      return formattedNumber.replace(/\B(?=(\d{3})+(?!\d))/g, ","); // 添加千位分隔符
    },

    selectOtherProject() {
      console.log("345");
      this.otherProjectFlag = !this.otherProjectFlag;
      if (this.otherProjectFlag) {
        this.projectTitle = "重点项目(内控)";
      } else {
        this.projectTitle = "安环项目";
      }
    },
    projectIntroductionActiveTitle() {
      this.projectIntroductionTitleFlag = !this.projectIntroductionTitleFlag;
    },
    projectIntroductionActive(item, projectInfoType) {
      console.log("123");
      this.projectInfoType = projectInfoType;
      this.projectIntroductionFlag = !this.projectIntroductionFlag;
      this.projectInfo = item;
      if (projectInfoType === 2) {
        this.onGetAnhuanProjectDetails(item.id);
      }
    },
    getTime() {
      this.timer = setInterval(() => {
        // 获取当前时间的各个部分
        const timeDate = new Date();

        let mounth = timeDate.getMonth() + 1;
        mounth = mounth >= 10 ? mounth : "0" + mounth;
        let day = timeDate.getDate();
        day = day >= 10 ? day : "0" + day;
        let hours = timeDate.getHours();
        // 格式化小时
        hours = hours >= 10 ? hours : "0" + hours;
        let minutes = timeDate.getMinutes();
        // 格式化分钟
        minutes = minutes >= 10 ? minutes : "0" + minutes;
        let seconds = timeDate.getSeconds();
        // 格式化秒钟
        seconds = seconds >= 10 ? seconds : "0" + seconds;
        const week = timeDate.getDay();
        const weekArr = [
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
        ];

        this.time = `${hours}:${minutes}:${seconds}`;
        this.date = `${mounth}月${day}日`;
        this.weekDay = weekArr[week];
      }, 1000);
    },
    getWeather() {
      axios
        .post("https://www.mojicb.com/eshop24-web/web/mjBasicInfo/weather", {
          latitude: "30.702636",
          longitude: "111.290843",
        })
        .then((res) => {
          this.temp_high = res.data.data.daily[0].temp_high;
          this.weather = res.data.data.daily[0].weather_day;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.homePage {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("assets/img/HomeBg-1.jpg") center no-repeat;
  background-size: cover;
  transition: 0.5s;
  overflow: hidden;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  &:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("assets/img/HomeBg-2.jpg") center no-repeat;
    background-size: cover;
    z-index: 1;
    transition: 0.5s;
    animation: pageBg 3s infinite;

    @keyframes pageBg {
      0% {
        opacity: 0;
      }

      50% {
        opacity: 1;
      }

      100% {
        opacity: 0;
      }
    }
  }

  .head {
    position: fixed;
    top: 30px;
    height: 40px;
    z-index: 9;
    &.sj {
      left: 30px;
    }
    &.tq {
      right: 30px;
      b {
        position: relative;
        margin-left: 10px;
        width: 150px;
        &::after {
          content: "℃";
          font-size: 15px;
          margin-left: 5px;
        }
      }
    }
    b {
      width: auto;
      height: 40px;
      line-height: 40px;
      display: inline-block;
      color: #cce0f1;
      font-weight: 400;
      font-size: 36px;
      font-family: "Bahnschrift";
      float: left;
    }
    label {
      width: auto;
      height: 20px;
      line-height: 20px;
      margin-top: 16px;
      color: #cce0f1;
      font-size: 13px;
      display: inline-block;
      float: left;
      margin-left: 10px;
    }
  }

  .main {
    position: absolute;
    top: 114px;
    left: 60px;
    right: 60px;
    bottom: 40px;
    z-index: 5;
    display: flex;
    flex-direction: row;
    opacity: 1;
    animation: main 5s linear;

    @keyframes main {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    > div {
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-sizing: border-box;
      transition: 0.5s;

      .module {
        position: relative;
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid rgba(11, 51, 103, 1);
        box-sizing: border-box;
        opacity: 1;
        transition: 0.5s;

        &:before {
          position: absolute;
          content: "";
          top: 0;
          left: 0;
          bottom: 0;
          width: 1px;
          z-index: -1;
          background: linear-gradient(
            to bottom,
            rgba(11, 51, 103, 0),
            rgba(11, 51, 103, 1)
          );
          transition: 0.5s;
        }

        &::after {
          position: absolute;
          content: "";
          top: 0;
          right: 0;
          bottom: 0;
          width: 1px;
          z-index: -1;
          background: linear-gradient(
            to bottom,
            rgba(11, 51, 103, 0),
            rgba(11, 51, 103, 1)
          );
          transition: 0.5s;
        }

        &:hover {
          border-bottom: 1px solid rgba(20, 146, 253, 1);

          &:before {
            background: linear-gradient(
              to bottom,
              rgba(20, 146, 253, 0),
              rgba(20, 146, 253, 1)
            );
          }

          &::after {
            background: linear-gradient(
              to bottom,
              rgba(20, 146, 253, 0),
              rgba(20, 146, 253, 1)
            );
          }

          .tit {
            &:before {
              animation: moduleTitLeft 2s infinite;

              @keyframes moduleTitLeft {
                0% {
                  left: 0;
                }

                100% {
                  width: 100%;
                  left: 100%;
                  background: linear-gradient(
                    to right,
                    rgba(20, 146, 253, 0),
                    #0ef9de
                  );
                }
              }
            }

            &::after {
              animation: moduleTitRight 2s infinite;

              @keyframes moduleTitRight {
                0% {
                  right: 0;
                }

                100% {
                  width: 100%;
                  right: 100%;
                  background: linear-gradient(
                    to right,
                    #0ef9de,
                    rgba(20, 146, 253, 0)
                  );
                }
              }
            }
          }

          .box {
            background: rgba(5, 44, 96, 0.3) url("assets/img/moduleBg.png")
              bottom center no-repeat;
            background-size: 100% auto;
          }
        }

        .tit {
          position: relative;
          height: 46px;
          background: #0a204b url("assets/img/moduleTitleBg.png") left bottom
            no-repeat;
          background-size: auto 90%;
          border-top: 2px solid #0f2b63;
          box-sizing: border-box;
          display: flex;
          flex-direction: row;

          &:before {
            position: absolute;
            content: "";
            top: -2px;
            left: 0;
            width: 26px;
            height: 2px;
            z-index: 1;
            background: #1492fd;
            overflow: hidden;
            transition: 0.5s;
          }

          &::after {
            position: absolute;
            content: "";
            top: -2px;
            right: 0;
            width: 26px;
            height: 2px;
            z-index: 1;
            background: #1492fd;
            overflow: hidden;
            transition: 0.5s;
          }

          .name {
            width: 100%;
            height: 44px;
            line-height: 44px;
            flex: 1;
            box-sizing: border-box;
            background: url("assets/img/moduleTitleIcon.png") left center
              no-repeat;
            padding-left: 50px;
            box-sizing: border-box;
            overflow: hidden;
            display: flex;
            flex-direction: row;

            b {
              display: inline-block;
              font-size: 17px;
              letter-spacing: 2px;
              color: #fff;
              font-weight: normal;
              margin-right: 10px;
            }

            label {
              width: 100%;
              flex: 1;
              overflow: hidden;
              display: inline-block;
              color: #6193d6;
              font-weight: 400;
              font-size: 16px;
              letter-spacing: 1px;
              font-family: "Bahnschrift";

              &:before {
                content: "/";
                color: #1858a8;
                margin-right: 10px;
              }
            }
          }

          .select {
            width: 46px;
            height: 46px;
            background: url("assets/img/selectIcon.png") 10px center no-repeat;
            cursor: pointer;
          }
          .timeChange {
            width: auto;
            height: 30px;
            margin: 8px 20px 0 0;
            overflow: hidden;
            .ant-calendar-picker-input.ant-input {
              background: blue;
            }
          }
        }

        .box {
          height: 100%;
          flex: 1;
          overflow: hidden;
          background: rgba(5, 44, 96, 0.18) url("assets/img/moduleBg.png")
            bottom center no-repeat;
          background-size: 100% auto;
          transition: 0.5s;
          animation-name: box;
          animation-duration: 10s;
          animation-delay: 0s;
          animation-iteration-count: 1;

          @keyframes box {
            0% {
              opacity: 0;
            }

            100% {
              opacity: 1;
            }
          }
        }
      }
    }

    .left {
      width: 26%;
      margin-right: 5px;
      transform: perspective(900px) rotateY(8deg);
      animation: left 5s linear;

      @keyframes left {
        0% {
          transform: perspective(900px) rotateY(0deg);
        }

        100% {
          transform: perspective(900px) rotateY(8deg);
        }
      }
      .jddx {
        height: 34%;
        margin-bottom: 15px;
        animation-name: jddx;
        animation-duration: 5s;
        animation-delay: 0s;
        animation-iteration-count: 1;

        @keyframes jddx {
          0% {
            opacity: 0;
          }

          100% {
            opacity: 1;
          }
        }
      }

      .lzda {
        height: 100%;
        flex: 1;
        animation-name: lzda;
        animation-duration: 8s;
        animation-delay: 0s;
        animation-iteration-count: 1;

        @keyframes lzda {
          0% {
            opacity: 0;
          }

          100% {
            opacity: 1;
          }
        }
      }

      .zdxm {
        height: 35%;
        margin-top: 15px;
        animation-name: zdxm;
        animation-duration: 4s;
        animation-delay: 0s;
        animation-iteration-count: 1;

        @keyframes zdxm {
          0% {
            opacity: 0;
          }

          100% {
            opacity: 1;
          }
        }
      }
    }

    .cent {
      width: 100%;
      flex: 1;
      padding: 20px 0;

      .tj {
        position: relative;
        height: 20%;
        border-bottom: 1px solid rgba(11, 51, 103, 1);
        background: rgba(5, 44, 96, 0.18) url("assets/img/moduleBg.png") bottom
          center no-repeat;
        background-size: 100% auto;
        margin-bottom: 15px;
        transition: 0.5s;
        animation-name: tj;
        animation-duration: 8s;
        animation-delay: 0s;
        animation-iteration-count: 1;

        @keyframes tj {
          0% {
            opacity: 0;
          }

          100% {
            opacity: 1;
          }
        }

        &:before {
          position: absolute;
          content: "";
          top: 0;
          left: 0;
          bottom: 0;
          width: 1px;
          z-index: -1;
          background: linear-gradient(
            to bottom,
            rgba(11, 51, 103, 0),
            rgba(11, 51, 103, 1)
          );
          transition: 0.5s;
        }

        &::after {
          position: absolute;
          content: "";
          top: 0;
          right: 0;
          bottom: 0;
          width: 1px;
          z-index: -1;
          background: linear-gradient(
            to bottom,
            rgba(11, 51, 103, 0),
            rgba(11, 51, 103, 1)
          );
          transition: 0.5s;
        }

        &:hover {
          border-bottom: 1px solid rgba(20, 146, 253, 1);

          &:before {
            background: linear-gradient(
              to bottom,
              rgba(20, 146, 253, 0),
              rgba(20, 146, 253, 1)
            );
          }

          &::after {
            background: linear-gradient(
              to bottom,
              rgba(20, 146, 253, 0),
              rgba(20, 146, 253, 1)
            );
          }

          .box {
            background: rgba(5, 44, 96, 0.3) url("assets/img/moduleBg.png")
              bottom center no-repeat;
            background-size: 100% auto;
          }
        }

        .tjBod {
          position: relative;
          width: 100%;
          height: 100%;
          background: url("assets/img/tjBg.png") top center no-repeat;
          padding-top: 12px;
          box-sizing: border-box;

          &:before {
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            overflow: hidden;
            background: linear-gradient(
              to right,
              rgba(11, 180, 249, 0),
              rgba(11, 180, 249, 1),
              rgba(11, 180, 249, 0)
            );
          }
        }
      }

      .rcjd {
        height: 100%;
        flex: 1;
        animation-name: rcjd;
        animation-duration: 5s;
        animation-delay: 0s;
        animation-iteration-count: 1;

        @keyframes rcjd {
          0% {
            opacity: 0;
          }

          100% {
            opacity: 1;
          }
        }
      }

      .zjwz {
        height: 35%;
        margin-top: 15px;
        animation-name: zjwz;
        animation-duration: 3s;
        animation-delay: 0s;
        animation-iteration-count: 1;

        @keyframes zjwz {
          0% {
            opacity: 0;
          }

          100% {
            opacity: 1;
          }
        }
      }
    }

    .right {
      width: 26%;
      margin-left: 5px;
      transform: perspective(900px) rotateY(-8deg);
      animation: right 5s linear;

      @keyframes right {
        0% {
          transform: perspective(900px) rotateY(0deg);
        }

        100% {
          transform: perspective(900px) rotateY(-8deg);
        }
      }
      .zxjd {
        height: 100%;
        flex: 1;
        overflow: hidden;
        animation-name: zxjd;
        animation-duration: 6s;
        animation-delay: 0s;
        animation-iteration-count: 1;

        @keyframes zxjd {
          0% {
            opacity: 0;
          }

          100% {
            opacity: 1;
          }
        }
      }

      .lzxc {
        height: 40%;
        margin-top: 15px;
        animation-name: lzxc;
        animation-duration: 4s;
        animation-delay: 0s;
        animation-iteration-count: 1;

        @keyframes lzxc {
          0% {
            opacity: 0;
          }

          100% {
            opacity: 1;
          }
        }
      }
    }
  }

  .border {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 2;

    > div {
      position: absolute;
      z-index: 2;
    }

    .topBorder {
      top: 0;
      left: 0;
      right: 0;
      height: 42px;
      background: url("assets/img/topBorder.png") top center no-repeat;
      animation: topBorder 1s linear;

      @keyframes topBorder {
        0% {
          top: -70px;
        }

        100% {
          top: 0;
        }
      }
    }
    /** 弹窗的CSS */

    .title {
      top: 0;
      left: 0;
      right: 0;
      height: 121px;
      background: url("assets/img/title.png") top center no-repeat;
      z-index: 1;
      animation: title 1.5s linear;

      @keyframes title {
        0% {
          opacity: 0;
          top: -300px;
        }

        100% {
          opacity: 1;
          top: 0;
        }
      }
    }

    .leftBorder {
      top: 80px;
      left: -5px;
      bottom: 0;
      width: 68px;
      background: url("assets/img/leftBorder.png") left center no-repeat;
      animation: leftBorder 1s linear;

      @keyframes leftBorder {
        0% {
          left: -70px;
        }

        100% {
          left: -5px;
        }
      }
    }

    .rightBorder {
      top: 80px;
      right: -5px;
      bottom: 0;
      width: 68px;
      background: url("assets/img/rightBorder.png") right center no-repeat;
      animation: rightBorder 1s linear;

      @keyframes rightBorder {
        0% {
          right: -70px;
        }

        100% {
          right: -5px;
        }
      }
    }

    .footerBorder {
      bottom: 0;
      left: 0;
      right: 0;
      height: 42px;
      background: url("assets/img/footerBorder.png") bottom center no-repeat;
      animation: footerBorder 1s linear;

      @keyframes footerBorder {
        0% {
          bottom: -70px;
        }

        100% {
          bottom: 0;
        }
      }
    }
  }

  .popBod {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(8, 28, 66, 0.9);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    .projectIntroduction {
      width: 70%;
      height: auto;
      background: linear-gradient(
        to bottom,
        rgba(12, 34, 74, 0.7),
        rgba(15, 49, 110, 0.9)
      );
      border: 1px solid #1f3b6f;
      box-sizing: border-box;
      padding: 20px 30px 30px 30px;
      display: flex;
      flex-direction: column;
      .overview {
        position: relative;
        width: 100%;
        height: auto;
        overflow: hidden;
        float: left;
        border-bottom: 1px solid #1f3b6f;
        margin-bottom: 20px;
        .close {
          position: absolute;
          top: 10px;
          right: 0;
          height: 30px;
          line-height: 30px;
          border-radius: 30px;
          background: #ff7777;
          color: #fff;
          cursor: pointer;
          padding: 0 15px;
          font-size: 13px;
          z-index: 2;
        }
        .xmmc {
          width: 100%;
          height: auto;
          overflow: hidden;
          > h1 {
            width: auto;
            height: 50px;
            margin: 0;
            background: -webkit-linear-gradient(left, #0ab5f9, #1a80fd);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
            float: left;
          }
          > label {
            font-style: italic;
            font-size: 16px;
            font-weight: bold;
            width: auto;
            height: 30px;
            line-height: 30px;
            background: #fbc829;
            color: #081c42;
            padding: 0 10px;
            border-radius: 0 6px 6px 6px;
            display: inline-block;
            float: left;
            margin: 10px 0 0 20px;
          }
        }

        > p {
          width: 33.33%;
          color: #cce0f1;
          font-size: 15px;
          float: left;
          margin: 10px 0 20px 0;
          b {
            font-family: "Bahnschrift";
            font-size: 28px;
            font-weight: 400;
            margin-right: 5px;
            color: #fff;
          }
        }
      }
      .synopsis {
        width: 100%;
        height: auto;
        overflow: hidden;
        .item {
          width: 50%;
          height: auto;
          overflow: hidden;
          float: left;
          margin-bottom: 20px;
          padding-right: 10px;
          box-sizing: border-box;
          &:nth-child(even) {
            padding: 0 0 0 10px;
          }
          .title {
            position: relative;
            width: auto;
            height: 40px;
            line-height: 40px;
            font-weight: bold;
            font-size: 15px;
            color: #fff;
            background: linear-gradient(to bottom, #0ab5f9, #1a80fd);
            border-radius: 10px 0 0 0;
            padding: 0 15px 0 30px;
            float: left;
            &:before {
              position: absolute;
              content: "";
              top: 0;
              right: -20px;
              clip-path: polygon(50% 0, 0 100%, 100% 100%);
              height: 40px;
              width: 40px;
              background: linear-gradient(
                0deg,
                #1a80fd,
                #0ab5f9 100%,
                transparent 50%,
                transparent 100%
              );
            }
          }
          .bod {
            width: 100%;
            height: 200px;
            background: #153267;
            border-radius: 0 10px 10px 10px;
            padding: 20px;
            box-sizing: border-box;
            float: left;
            overflow: hidden;
            overflow-y: auto;
            > p {
              width: 100%;
              height: auto;
              line-height: 30px;
              color: #95abd3;
              margin: 0;
              font-size: 14px;
            }
          }
        }
      }
      .enterprise {
        width: 100%;
        height: auto;
        overflow: hidden;
        background: linear-gradient(to bottom, #0ab5f9, #1a80fd);
        border-radius: 10px;
        display: flex;
        flex-direction: row;
        color: #fff;
        display: flex;
        flex-direction: row;
        margin-top: 20px;
        > div {
          width: 200px;
          height: auto;
          overflow: hidden;
          padding: 15px 25px;
          box-sizing: border-box;
          &:first-child {
            width: 100%;
            flex: 1;
          }
          p {
            width: 100%;
            height: auto;
            line-height: 22px;
            float: left;
            margin: 5px 0;
            font-size: 14px;
          }
        }
      }
    }
  }

  .popBod_Anhuan {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(8, 28, 66, 0.9);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    .projectIntroduction {
      width: 65%;
      height: auto;
      background: linear-gradient(
        to bottom,
        rgba(12, 34, 74, 0.7),
        rgba(15, 49, 110, 0.9)
      );
      border: 1px solid #1f3b6f;
      box-sizing: border-box;
      padding: 20px 30px 30px 30px;
      display: flex;
      flex-direction: column;
      .overview {
        position: relative;
        width: 100%;
        height: auto;
        overflow: hidden;
        float: left;
        border-bottom: 1px solid #1f3b6f;
        margin-bottom: 20px;
        .close {
          position: absolute;
          top: 10px;
          right: 0;
          height: 30px;
          line-height: 30px;
          border-radius: 30px;
          background: #ff7777;
          color: #fff;
          cursor: pointer;
          padding: 0 15px;
          font-size: 13px;
          z-index: 2;
        }
        .xmmc {
          width: 100%;
          height: auto;
          overflow: hidden;
          > h1 {
            width: auto;
            height: 50px;
            margin: 0;
            background: -webkit-linear-gradient(left, #0ab5f9, #1a80fd);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
            float: left;
          }
          > label {
            font-style: italic;
            font-size: 16px;
            font-weight: bold;
            width: auto;
            height: 30px;
            line-height: 30px;
            background: #fbc829;
            color: #081c42;
            padding: 0 10px;
            border-radius: 0 6px 6px 6px;
            display: inline-block;
            float: left;
            margin: 10px 0 0 20px;
          }
        }

        > p {
          width: 33.33%;
          color: #cce0f1;
          font-size: 15px;
          float: left;
          margin: 10px 0 20px 0;
          b {
            font-family: "Bahnschrift";
            font-size: 28px;
            font-weight: 400;
            margin-right: 5px;
            color: #fff;
          }
        }
      }
      .synopsis {
        width: 100%;
        height: auto;
        overflow: hidden;
        .item {
          width: 100%;
          height: auto;
          overflow: hidden;
          float: left;
          margin-bottom: 20px;
          padding-right: 10px;
          box-sizing: border-box;
          &:nth-child(even) {
            padding: 0 0 0 10px;
          }
          .title {
            position: relative;
            width: auto;
            height: 40px;
            line-height: 40px;
            font-weight: bold;
            font-size: 15px;
            color: #fff;
            background: linear-gradient(to bottom, #0ab5f9, #1a80fd);
            border-radius: 10px 0 0 0;
            padding: 0 15px 0 30px;
            float: left;
            &:before {
              position: absolute;
              content: "";
              top: 0;
              right: -20px;
              clip-path: polygon(50% 0, 0 100%, 100% 100%);
              height: 40px;
              width: 40px;
              background: linear-gradient(
                0deg,
                #1a80fd,
                #0ab5f9 100%,
                transparent 50%,
                transparent 100%
              );
            }
          }
          .bod {
            width: 100%;
            height: 200px;
            background: #153267;
            border-radius: 0 10px 10px 10px;
            padding: 20px;
            box-sizing: border-box;
            float: left;
            overflow: hidden;
            overflow-y: auto;
            > p {
              width: 100%;
              height: auto;
              line-height: 30px;
              color: #95abd3;
              margin: 0;
              font-size: 14px;
            }
          }
        }
      }
      .enterprise {
        width: 100%;
        height: auto;
        overflow: hidden;
        background: linear-gradient(to bottom, #0ab5f9, #1a80fd);
        border-radius: 10px;
        display: flex;
        flex-direction: row;
        color: #fff;
        display: flex;
        flex-direction: row;
        margin-top: 20px;
        > div {
          width: 200px;
          height: auto;
          overflow: hidden;
          padding: 15px 25px;
          box-sizing: border-box;
          &:first-child {
            width: 100%;
            flex: 1;
          }
          p {
            width: 100%;
            height: auto;
            line-height: 22px;
            float: left;
            margin: 5px 0;
            font-size: 14px;
          }
        }
      }
    }
  }

  .popBod_Anhuan_title {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(8, 28, 66, 0.9);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    .projectIntroduction {
      width: 45%;
      height: auto;
      background: linear-gradient(
        to bottom,
        rgba(12, 34, 74, 0.7),
        rgba(15, 49, 110, 0.9)
      );
      border: 1px solid #1f3b6f;
      box-sizing: border-box;
      padding: 20px 30px 30px 30px;
      display: flex;
      flex-direction: column;
      .overview {
        position: relative;
        width: 100%;
        height: auto;
        overflow: hidden;
        float: left;
        // border-bottom: 1px solid #1f3b6f;
        margin-bottom: 20px;
        .close {
          position: relative;
          top: 10px;
          right: 0;
          height: 30px;
          line-height: 30px;
          border-radius: 30px;
          background: #ff7777;
          color: #fff;
          cursor: pointer;
          padding: 0 15px;
          font-size: 13px;
          z-index: 2;
        }
        .xmmc {
          width: 100%;
          height: auto;
          overflow: hidden;
          > h1 {
            width: auto;
            height: 50px;
            margin: 0;
            background: -webkit-linear-gradient(left, #0ab5f9, #1a80fd);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
            float: left;
          }
          > label {
            font-style: italic;
            font-size: 16px;
            font-weight: bold;
            width: auto;
            height: 30px;
            line-height: 30px;
            background: #fbc829;
            color: #081c42;
            padding: 0 10px;
            border-radius: 0 6px 6px 6px;
            display: inline-block;
            float: left;
            margin: 10px 0 0 20px;
          }
        }

        > p {
          width: 33.33%;
          color: #cce0f1;
          font-size: 15px;
          float: left;
          margin: 10px 0 20px 0;
          b {
            font-family: "Bahnschrift";
            font-size: 28px;
            font-weight: 400;
            margin-right: 5px;
            color: #fff;
          }
        }
      }
      .synopsis {
        width: 100%;
        height: auto;
        overflow: hidden;
        .item {
          width: 100%;
          height: auto;
          overflow: hidden;
          float: left;
          margin-bottom: 20px;
          padding-right: 10px;
          box-sizing: border-box;
          &:nth-child(even) {
            padding: 0 0 0 10px;
          }
          .title {
            position: relative;
            width: auto;
            height: 40px;
            line-height: 40px;
            font-weight: bold;
            font-size: 15px;
            color: #fff;
            background: linear-gradient(to bottom, #0ab5f9, #1a80fd);
            border-radius: 10px 0 0 0;
            padding: 0 15px 0 30px;
            float: left;
            &:before {
              position: absolute;
              content: "";
              top: 0;
              right: -20px;
              clip-path: polygon(50% 0, 0 100%, 100% 100%);
              height: 40px;
              width: 40px;
              background: linear-gradient(
                0deg,
                #1a80fd,
                #0ab5f9 100%,
                transparent 50%,
                transparent 100%
              );
            }
          }
          .bod {
            width: 100%;
            height: 300px;
            background: #153267;
            border-radius: 0 10px 10px 10px;
            padding: 20px;
            box-sizing: border-box;
            float: left;
            overflow: hidden;
            overflow-y: auto;
            > p {
              width: 100%;
              height: auto;
              line-height: 30px;
              color: #95abd3;
              margin: 0;
              font-size: 14px;
            }
          }
        }
      }
      .enterprise {
        width: 100%;
        height: auto;
        overflow: hidden;
        background: linear-gradient(to bottom, #0ab5f9, #1a80fd);
        border-radius: 10px;
        display: flex;
        flex-direction: row;
        color: #fff;
        display: flex;
        flex-direction: row;
        margin-top: 20px;
        > div {
          width: 200px;
          height: auto;
          overflow: hidden;
          padding: 15px 25px;
          box-sizing: border-box;
          &:first-child {
            width: 100%;
            flex: 1;
          }
          p {
            width: 100%;
            height: auto;
            line-height: 22px;
            float: left;
            margin: 5px 0;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.timeChange {
  .ant-calendar-picker-input.ant-input {
    background: rgba(0, 0, 0, 0.1);
    color: #fff;
  }
}
.timeChange .anticon {
  color: #999 !important;
}
</style>
